<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 23</title>
  <style>
    /* 动画 */
    @keyframes leftToRight {
      0% {
        transform: translateX(-100px);
      }

      50% {
        transform: translateX(-50px);
      }

      0% {
        transform: translateX(0px);
      }
    }

    .animation {
      animation: leftToRight 3s;
    }

    /* 过渡 */
    .transition {
      transition: 3s background-color ease;
    }

    .blue {
      background: blue;
    }

    .green {
      background: green;
    }
  </style>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        animate: {
          animation: false,
          transition: true,
          blue: true,
          green: false
        }
      }
    },
    methods: {
      handleClick() {
        this.animate.animation = !this.animate.animation
        this.animate.blue = !this.animate.blue
        this.animate.green = !this.animate.green
      }
    },
    template: `
      <div>
        <div :class="animate" >hello world</div>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>